// Sandstorm - Personal Cloud Sandbox
// Copyright (c) 2014 Sandstorm Development Group, Inc. and contributors
// All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.main-content>.about {
  @extend %padded-info-page;

  >section.intro {
    text-align: left;
    height: 200px;
    background-image: url("/sandcat-aboutus.svg");
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 200px;

    @media (max-width: 625px) {
      padding-left: 0;
      padding-top: 200px;
      background-size: 200px 200px;
      background-position: top center;
      height: auto;
      padding-bottom: 8px;
    }

    >p {
      font-size: 120%;
      line-height: 150%;
      @media (max-width: 1300px) {
        line-height: inherit;
        margin-top: 0;
      }
      @media (max-width: 1100px) {
        font-size: inherit;
      }
    }

    >p.version {
      font-weight: 600;
      margin-bottom: 0;
    }

    >p.unofficial {
      margin: 0;
      font-size: inherit;
    }

    overflow: hidden;
  }

  >section.changelog {
    text-align: left;
    background-color: white;
    border: 16px solid white;
    overflow: auto;
    height: 400px;
    >* { margin-top: 0; }
  }

  >section.dependencies {
    margin-top: 32px;

    h2 {
      text-align: center;
      margin-bottom: 32px;
    }

    >ul {
      text-align: justify;
      padding: 0;
      margin-bottom: 0;

      >li {
        display: inline-block;
        width: 300px;
        text-align: left;
        margin-bottom: 1em;
        color: #6d6d6d;

        >a {
          display: block;
          color: black;
          &:hover {
            color: $darker-purple-color;
          }

          &::after {
            content: " >";
            display: inline;
          }
        }

        &.spacer {
          height: 0;
          margin-bottom: 0;
        }
      }
    }

    >p {
      text-align: left;
    }
  }

  >section.copyright {
    margin-top: 64px;
    border-top: 1px solid #6d6d6d;
    border-bottom: 1px solid #6d6d6d;
    padding-bottom: 40px;

    h2 {
      text-align: center;
    }
    text-align: left;

    background-image: url("/sandstorm-gradient-logo.svg");
    background-repeat: no-repeat;
    background-size: 150px 150px;
    background-position: 16px 40px;
    @media (max-width: 625px) {
      padding-top: 200px;
      background-size: 200px 200px;
      background-position: top center;
    }

    p {
      padding-left: 200px;
      @media (max-width: 625px) {
        padding-left: 0;
      }
      font-size: 120%;
      line-height: 150%;
      @media (max-width: 1300px) {
        line-height: inherit;
        margin-top: 0;
      }
      @media (max-width: 1100px) {
        font-size: inherit;
      }
    }
  }

  >section.terms {
    >ul {
      padding: 0;
      font-size: 150%;

      >li {
        display: inline-block;
        text-transform: uppercase;
        margin: 0 32px;

        >a {
          color: black;
          font-weight: normal;
          &:hover {
            color: $darker-purple-color;
          }
        }
      }
    }
  }
}

%padded-info-page {
  color: #191919;

  padding: 64px;
  max-width: 1238px;
  @media #{$mobile} {
    padding: 8px;
  }
  text-align: center;

  h1, h2 {
    font-weight: normal;
    text-align: left;
  }

  h1 {
    font-size: 25pt;
    padding-bottom: 8px;
    border-bottom: 1px solid #6d6d6d;
    margin-top: 0;
  }

  h2 {
    font-size: 20pt;
  }
}

%content-section {
    background-color: white;
    display: inline-block;
}
